<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单数据提交</title>
	</head>
	<body>
		<div id="app">
			<!-- vue 使用数据的双向绑定的结构
			 案例：1.input 文本输入框
			       2.textarea 文本域
				   3.select  文本下拉框
				   4.radio 单选框
				   5.checkbok 复选框
			 -->
			<form action="#" v-pre method="">
				姓名：<input type="text" v-model="user.username" /><br>
				详情：<textarea v-model="user.info"></textarea><br>
				<!-- 添加 multiple="true"属性  可以多选-->
				城市：<select name="city" v-model="user.city">
					<option value="北京">北京</option>
					<option value="上海">上海</option>
					<option value="成都">成都</option>
					<option value="贵阳">贵阳</option>
				</select>

				<br>
				<input type="radio" name="sex" value="男" v-model="user.sex" />男
				<input type="radio" name="sex" value="女" v-model="user.sex" />女
				<input type="radio" name="sex" value="其他" v-model="user.sex" />其他
				<br>
				<input type="checkbox" name="hb" value="yy" v-model="user.hb" />游泳
				<input type="checkbox" name="hb" value="ps" v-model="user.hb" />爬山
				<input type="checkbox" name="hb" value="km" v-model="user.hb" />看妹子
				<input type="checkbox" name="hb" value="cg" v-model="user.hb" />唱歌
			</form>


		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el: 'app',
				data: {
					user: {
						username: '',
						info: '用户信息',
						//如果是单值数据，用字符串，多值用数组
						city: ['北京'],
						sex: '男',
						hb: ['爬山']


					}
				},
				methods: {


				}


			})
		</script>

	</body>
</html>
